import React from 'react';
// import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Avatar from '@material-ui/core/Avatar';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';


export default class MyAppBar extends React.Component {
    constructor(props) {
        super(props);
        //自定义样式
        this.style = {
            root: {
                flexGrow: 1,
                zIndex:100
            },
            menuButton: {
                marginRight: 0,
            },
            title: {
                flexGrow: 1,
            },
            formControl: {
                minWidth: 120,
            },
            selectEmpty: {
                marginTop: 10
            },

        };
        Object.assign(this.style,this.props.style);
        //仅需在这里加学期，就可以实现在下拉框加学期选项
        this.terms = [
            '2019-2020第一学期',
            '2019-2020第二学期',
            '2020-2021第一学期',
            '2020-2021第二学期',
        ]

        this.state = {
            title: this.props.title,
            avatar: this.props.avatar ? this.props.avatar : '',
            username: this.props.username ? this.props.username : '',
            term:this.terms[0]
        }

    }

    handleChange(event){
        this.setState({
            term:event.target.value
        })
    }

    //打开侧边栏
    openDrawer = ()=>{
        this.props.callback();
    }


    render() {

        return (
            <div style={this.style.root}>
                <AppBar position="fixed" color='transparent'>
                    <Toolbar>
                        <IconButton onClick={this.openDrawer} edge="start" style={this.style.menuButton} color="inherit" aria-label="menu">
                            <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" style={this.style.title}>
                            {this.state.title}
                        </Typography>
                        {/**学期选择框 */}
                        <FormControl variant="standard" style={this.style.formControl}>
                            <InputLabel id="demo-simple-select-outlined-label">学期</InputLabel>
                            <Select
                            labelId="demo-simple-select-outlined-label"
                            id="demo-simple-select-outlined"
                            value={this.state.term}
                            onChange={(e)=>this.handleChange(e)}
                            label="学期"
                            >
                            {
                                this.terms.map(
                                    (item,index)=>
                                    <MenuItem key={index} value={item}>
                                        {/*map循环时要求key值，少部分时使用index，改进时使用index+item，但这种写法在item未对象时失效*/}
                                        {item}
                                    </MenuItem>
                                )
                            }
                            
                            </Select>
                        </FormControl>

                        {//条件渲染，当前置条件实现时后部分条件不会被执行
                            this.state.username || <Button color="inherit">登录</Button>
                        }

                        <Avatar style={this.style.menuButton} src={this.state.avatar}>
                            {this.state.username ? this.state.username.charAt(0) : 'A'/*取得当前用户的首字母，否则用A代替*/}
                        </Avatar>
                    </Toolbar>
                </AppBar>
            </div>
        );
    }

}